<route lang="json5" type="page">
{
  layout: 'default',
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '交通向导',
  },
}
</route>

<script lang="ts" setup>
import type { TransportationItemDto } from '@/service/app/types'
import { transportationControllerFindAll } from '@/service/app/jiaotongxiangdao'

// 系统信息获取
// #ifdef MP-WEIXIN
const systemInfo = uni.getWindowInfo()
const top = systemInfo.safeArea?.top ?? null
// #endif

// 返回功能
function back() {
  uni.navigateBack()
}

// Tab相关数据和状态
const activeTab = ref(0)
const tabList = ref([
  { title: '简史', key: 'jianshi' },
  { title: '中国古镇在哪里？', key: 'weizhi' },
  { title: '建筑风格', key: 'jianzhu' },
])

// 交通向导数据
const transportationList = ref<TransportationItemDto[]>([])

// 主要内容数据
const mainContent = ref({
  title: '中国古镇',
  subtitle: '兼具传统风貌和人文之美的百年"集镇"',
  description: '在优越的生态环境和地域经济的催生下，古镇历经百年沧桑款款而来。从北国的质朴敦厚到江南水乡的精致婉约，遍布中国的古镇，深缩着不同地域独特的环境特性和文化气质，在保留旧时市井格局的同时，也以独有的韵味承载着中国式栖居的理想城镇范本。',
})

// 速览数据 - 三个标签页的内容
const speedViewData = ref({
  jianshi: {
    title: '简史',
    content: '"镇"最初为安定、抑制之意，指"一方之首山"，即一定区域内最大的山，周代的"镇服"、晋代的"方镇"，都是基于此义而产生、引申为派兵驻守的地方，成为区...',
    showMore: false,
    fullContent: '"镇"最初为安定、抑制之意，指"一方之首山"，即一定区域内最大的山，周代的"镇服"、晋代的"方镇"，都是基于此义而产生、引申为派兵驻守的地方，成为区域性的政治、经济、文化中心。随着历史的发展，古镇逐渐形成了独特的建筑风格和文化特色，成为中华文明的重要载体。',
  },
  weizhi: {
    title: '中国古镇在哪里？',
    content: '中国古镇主要分布在江南水乡地区，如江苏、浙江、上海等地，这些地区水网密布，交通便利，商贸发达，为古镇的形成和发展提供了得天独厚的条件...',
    showMore: false,
    fullContent: '中国古镇主要分布在江南水乡地区，如江苏、浙江、上海等地，这些地区水网密布，交通便利，商贸发达，为古镇的形成和发展提供了得天独厚的条件。此外，在山西、安徽、四川等地也有许多保存完好的古镇，各具特色。',
  },
  jianzhu: {
    title: '建筑风格',
    content: '中国古镇建筑风格多样，江南古镇以白墙黛瓦、小桥流水为特色；北方古镇则以四合院、胡同为主要形式；西南古镇多为吊脚楼、石板路...',
    showMore: false,
    fullContent: '中国古镇建筑风格多样，江南古镇以白墙黛瓦、小桥流水为特色；北方古镇则以四合院、胡同为主要形式；西南古镇多为吊脚楼、石板路。这些建筑不仅体现了不同地域的文化特色，也展现了中国传统建筑的精湛工艺。',
  },
})

// 地图数据
const mapInfo = ref({
  title: '中国古镇不完全地图',
  image: 'https://m.360buyimg.com/i/jfs/t1/306136/5/15674/110093/686777b2F2aac0155/a1b9c1b5ef5807c1.jpg',
})

// 获取交通向导数据
onMounted(async () => {
  try {
    const res = await transportationControllerFindAll({})
    if (res.success && res.data) {
      transportationList.value = res.data
    }
  }
  catch (error) {
    console.error('获取交通向导数据失败', error)
  }
})

// 切换Tab
function handleTabChange(index: number) {
  activeTab.value = index
}

// 切换展开/收起
function toggleShowMore(tabKey: string) {
  speedViewData.value[tabKey].showMore = !speedViewData.value[tabKey].showMore
}
</script>

<template>
  <!-- 导航栏 -->
  <view class="fixed top-0 z-20 w-full transition-all duration-300">
    <view :style="{ height: `${top}px` }" />
    <view class="h-11 flex items-center px-30rpx">
      <wd-icon name="thin-arrow-left" size="22px" color="white" @click="back" />
    </view>
  </view>

  <!-- 背景图 -->
  <image class="relative z-[-1] h-460rpx w-full" src="https://m.360buyimg.com/i/jfs/t1/306136/5/15674/110093/686777b2F2aac0155/a1b9c1b5ef5807c1.jpg" mode="aspectFill" />

  <!-- 主内容区 -->
  <view class="relative z-5 mt-[-36rpx] rounded-3xl bg-white px-30rpx py-40rpx">
    <!-- 标题区域 -->
    <view class="mb-40rpx">
      <view class="mb-20rpx text-48rpx text-#8B4513 font-bold">
        {{ mainContent.title }}
      </view>
      <view class="mb-30rpx text-28rpx text-gray-600">
        {{ mainContent.subtitle }}
      </view>
      <view class="text-28rpx text-gray-700 leading-relaxed">
        {{ mainContent.description }}
      </view>
    </view>

    <!-- 速览标题 -->
    <view class="mb-30rpx text-36rpx text-gray-800 font-bold">
      速览
    </view>

    <!-- Tabs组件 -->
    <wd-tabs v-model="activeTab" @change="handleTabChange">
      <wd-tab v-for="(tab, index) in tabList" :key="index" :title="tab.title" />
    </wd-tabs>

    <!-- 滑动内容区域 -->
    <scroll-view
      scroll-x
      :scroll-left="activeTab * 750"
      class="speed-view-scroll"
      :scroll-with-animation="true"
    >
      <view class="speed-view-container">
        <view
          v-for="(tab, index) in tabList"
          :key="index"
          class="speed-view-item"
        >
          <!-- 内容卡片 -->
          <view class="content-card">
            <view class="content-text">
              {{ speedViewData[tab.key].showMore ? speedViewData[tab.key].fullContent : speedViewData[tab.key].content }}
            </view>
            <view class="expand-btn" @click="toggleShowMore(tab.key)">
              <text class="expand-text">
                {{ speedViewData[tab.key].showMore ? '收起' : '查看全部' }}
              </text>
              <wd-icon
                :name="speedViewData[tab.key].showMore ? 'arrow-up' : 'arrow-down'"
                size="16px"
                color="#666"
              />
            </view>
          </view>
        </view>
      </view>
    </scroll-view>

    <!-- 地图区域 -->
    <view class="mt-60rpx">
      <view class="mb-20rpx flex items-center justify-between">
        <view class="text-36rpx text-gray-800 font-bold">
          {{ mapInfo.title }}
        </view>
        <view class="content-catalog">
          内容目录
        </view>
      </view>
      <image class="w-full rounded-lg" :src="mapInfo.image" mode="widthFix" />
    </view>
  </view>
</template>

<style lang="scss" scoped>
// Tabs样式
:deep(.wd-tabs__nav) {
  background-color: #f5f5f5;
  border-radius: 12rpx;
  padding: 8rpx;
  margin-bottom: 30rpx;
}

:deep(.wd-tab) {
  font-size: 28rpx;
  color: #666;
  background-color: transparent;
  border-radius: 8rpx;
  transition: all 0.3s ease;
  margin: 0 4rpx;
}

:deep(.wd-tab.is-active) {
  color: #333;
  font-weight: 600;
  background-color: white;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

:deep(.wd-tabs__line) {
  background-color: #977c66;
  height: 4rpx;
  bottom: 8rpx;
}

// 滑动面板样式
.speed-view-scroll {
  width: 100%;
  white-space: nowrap;
}

.speed-view-container {
  display: flex;
  width: calc(100% * 3); // 三个标签页的宽度
}

.speed-view-item {
  width: calc(100% / 3);
  padding: 20rpx 10rpx;
  box-sizing: border-box;
}

.content-card {
  background-color: #f8f8f8;
  border-radius: 12rpx;
  padding: 30rpx;
  position: relative;
}

.content-text {
  font-size: 28rpx;
  line-height: 1.6;
  color: #333;
  margin-bottom: 20rpx;
}

.expand-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10rpx 0;
  cursor: pointer;
  transition: all 0.3s ease;
}

.expand-text {
  font-size: 26rpx;
  color: #666;
  margin-right: 8rpx;
}

.expand-btn:hover {
  opacity: 0.7;
}

// 内容目录样式
.content-catalog {
  font-size: 26rpx;
  color: #666;
  padding: 8rpx 16rpx;
  background-color: #f5f5f5;
  border-radius: 20rpx;
}
</style>
